<template>
  <div class="skill_group">
    <el-dialog :close-on-click-modal="false" :title="dialogTitle" modal-append-to-body lock-scroll :visible.sync="dialogVisible" width="30%">
      <el-form labelPosition="top" :rules="rules" :model="skillForm" ref="ruleForm">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item :label="$t('public.queues')" prop="id">
              <el-select size="mini" style="width: 100%" v-model.trim="skillForm.id" :placeholder="$t('public.pleasePick')" @change="changeOption">
                <el-option
                  v-for="item in peerOptions"
                  :key="item._id"
                  :label="item.DisplayName"
                  :value="item.Exten">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('webchat.typeName')" prop="name">
              <el-input v-model.trim="skillForm.name"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item :label="$t('configLazyLoad.channel.appTip10')" prop="status">
              <el-radio-group v-model.trim="skillForm.status">
                <el-radio label="enable">{{$t('configLazyLoad.public.reuse')}}</el-radio>
                <el-radio label="disable">{{$t('configLazyLoad.public.noReuse')}}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button class="primary_btn" type="primary" @click="confirm()">{{$t('public.confirm')}}</el-button>
      </div>
    </el-dialog>
    <el-form-item :label="$t('config.channel.accessSkillGroupName')+':'">
      <div class="item_group">
        <div class="item" v-for="(ToPeerItem, index) in ToPeer">
          <el-tooltip class="item" effect="dark" :content="ToPeerItem.status === 'enable' ? $t('configLazyLoad.channel.appTip11') : $t('configLazyLoad.channel.appTip12')" placement="top">
            <span class="item_btn" :class="{item_disable: ToPeerItem.status === 'disable'}" @click="changeStatus(ToPeerItem.status, index)">
              {{ToPeerItem.name}}
              <i class="iconfont icon-guanbi" @click.stop="deletePeerItem(index)"></i>
            </span>
          </el-tooltip>
          <a href="javascript:;" @click="editPeer(ToPeerItem.id, ToPeerItem.name, ToPeerItem.status, index)">{{$t('public.edit2')}}</a>
        </div>
      </div>
      <el-button v-if="showBtn" @click="addSkill()" size="small">{{$t('callServiceSkillGroup.callServiceSkillGroup5')}}</el-button>
    </el-form-item>
  </div>
</template>
<script>
  import {deepClone} from '@/utils/m7Utils'
  export default {
    name: 'chooseSkillCroup',
    data () {
      return {
        skllGroup: '',
        dialogVisible: false,
        skillForm: {
          name: '',
          id: '',
          status: 'enable'
        },
        peerOptions: [],
        ToPeer: this.toPeerInfo || [],
        rules: {
          id: [
            { required: true, message: this.$t('webchat.placeSkillsGrouop'), trigger: 'change' }
          ],
          name: [
            { required: true, message: this.$t('configLazyLoad.channel.robotError2'), trigger: 'blur' }
          ]
        },
        dialogTitle: '',
        isAdd: true, // 是编辑还是新增
        editIndex: 0,
        showBtn: true
      }
    },
    props: {
      toPeerInfo: Array,
      peerLength: {
        type: Number,
        default: 0
      }
    },
    components: {},
    computed: {},
    watch: {
//      toPeerInfo: 'featchData',
      toPeerInfo (val) {
        this.ToPeer = val || []
        this.toPeerChange()
      }
    },
    methods: {
      toPeerChange () {
        if (this.peerLength && this.peerLength > 0 && this.ToPeer.length >= this.peerLength) {
          this.showBtn = false
        } else {
          this.showBtn = true
        }
      },
      confirm () {
        this.$refs.ruleForm.validate((valid) => {
          let result = this.ToPeer.filter((item) => item.id === this.skillForm.id)
          if (result && result.length && this.isAdd) {
            this.$message.error(this.$t('configLazyLoad.channel.robotError3'))
            return false
          } else if (valid && this.isAdd) {
            this.ToPeer.push(deepClone(this.skillForm))
            this.dialogVisible = false
          } else if (valid && !this.isAdd) {
            let clonePeer = deepClone(this.ToPeer)
            for (let key in this.skillForm) {
              this.ToPeer[this.editIndex][key] = this.skillForm[key]
            }
            let currResult = this.ToPeer.filter((item) => item.id === this.skillForm.id)
            if (currResult.length >= 2) {
              this.$message.error(this.$t('configLazyLoad.channel.robotError3'))
              this.ToPeer = clonePeer
              return false
            }
            this.dialogVisible = false
            this.toPeerChange()
          } else {
            return false
          }
        })
      },
      addSkill () {
        this.dialogTitle = this.$t('callServiceSkillGroup.callServiceSkillGroup5')
        this.isAdd = true
        this.showSkillDialog()
      },
      showSkillDialog () {
        this.dialogVisible = true
        if (this.$refs.ruleForm) {
          this.$refs.ruleForm.resetFields()
        }
        this.$store.dispatch('getCache', { type: 'mailQueues' }).then(req => {
          let mailQueues = this.$getCache('mailQueues')
          if (!mailQueues || mailQueues.length === 0) {
            // 按照老版没有技能组时应该跳转到添加技能组页 暂不处理
            // $().alertmessage("showError", "您还没设置技能组，请先到【渠道技能组】添加技能组!");
            return
          }
          this.peerOptions = mailQueues || []
        })
      },
      deletePeerItem (index) { // 删除技能组
        this.ToPeer.splice(index, 1)
        this.toPeerChange()
      },
      changeStatus (status, index) {
        this.ToPeer[index].status = status === 'enable' ? 'disable' : 'enable'
      },
      changeOption (val) {
        let peer = this.peerOptions.filter((item) => item.Exten === val)[0]
        this.skillForm.name = peer ? peer.DisplayName : ''
      },
      editPeer (id, name, status, index) { // 编辑技能组
        this.dialogTitle = this.$t('callServiceSkillGroup.callServiceSkillGroup6')
        this.showSkillDialog()
        this.isAdd = false
        this.editIndex = index
        this.skillForm.id = id
        this.skillForm.name = name
        this.skillForm.status = status
      },
      featchData () {
//        this.ToPeer = deepClone(this.toPeerInfo) || []
      }
    },
    beforeMount () {
      this.featchData()
      this.toPeerChange()
    }
  }
</script>

<style lang="stylus" scoped>
  @import "../../../../../assets/common.styl"
  .skill_group
    .item_group
      .item
        position relative
        .item_btn
          width 220px
          height 24px
          text-align center
          border-radius 4px
          display inline-block
          line-height: 24px
          font-size: 12px
          background: $c-main
          color: #fff
          margin-bottom: 10px
          margin-right: 10px
          cursor: pointer
          position relative
          .icon-guanbi
            font-size: 12px
            width: 16px
            height: 16px
            line-height: 16px
            position: absolute
            top: -7px
            right: -8px
            background: #fe6d6c
            padding: 2px 1px 1px 2px
            color: #fff
            border-radius: 50%
            cursor: pointer
            display none
        .item_btn:hover
          .icon-guanbi
            display block
        .item_disable
          background #ccc
</style>
